import { Wrapper } from "./styles";
import { Button } from "antd";
import { Separator } from "@shadcn/separator";
import { MentionCard } from "./components/MentionCard";
import { useViewModel } from "./model.view";

export function XHSMentions() {
  const { globalModel, onMentionClick } = useViewModel();

  return (
    <Wrapper className={"xhs-comments"}>
      <div className={"comment-controller"}>
        <div>全部评论</div>
        <div>
          <Button type={"primary"} size={"small"} disabled={true}>
            筛选
          </Button>
          <Button type={"primary"} size={"small"} disabled={true}>
            排序
          </Button>
        </div>
      </div>
      <Separator />
      <div className={"comment-list"}>
        {globalModel?.mentions?.records.map((record) => (
          <MentionCard
            key={record.id}
            mention={record}
            onClick={onMentionClick(record)}
          />
        ))}
      </div>
    </Wrapper>
  );
}
